<template>
  <div id="app">
    <m-header></m-header>
    <tab-nav></tab-nav>
      <transition :name="transitionName">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </transition>
    </div>
</template>

<script>
import MHeader from './common/header'
import TabNav from './common/tab'

export default {
  name: 'app',
  data () {
    return {
      transitionName: 'slide'
    }
  },
  components: {
    MHeader,
    TabNav
  },
  watch: {
    $route (to, from) {
      if (to.meta.index < from.meta.index) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = 'slide-right'
      }
    }
  }
}
</script>

<style lang="less">
@import './assets/less/variable.less';
#app {
  width: 100%;
  height: 100%;
  font-family: 'Microsoft YaHei';
  background: #eee;
  overflow: hidden;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active{
  transition: all .3s;
}
.slide-left-enter,.slide-right-leave-to{
  transform: translate(-100%, 0);
}
.slide-right-enter,.slide-left-leave-to{
  transform: translate(100%, 0);
}

</style>
